<template>
  <van-nav-bar
    title="全部订单"
    left-arrow
  />
  <van-cell-group class="tags">
    <van-cell>
      <template #value>
        <ul class="tag-list">
          <li
            size="small"
            v-for="item in tagOptions"
            :key="item.text"
            :class="{ active: item.type === currentType }"
            @click="currentType = item.type"
          >{{ item.text }}</li>
        </ul>
      </template>
    </van-cell>
  </van-cell-group>
  <div class="order-list">
    <!-- 空状态 -->
    <van-empty v-if="isEmpty" description="暂时没有订单哦~" />
    <!-- 单个列表项 -->
    <van-cell-group
      inset
      v-for="order in shownOrder"
      :key="order.order_id"
    >
      <van-cell :title="`订单号：${ order.order_id }`" />
      <van-cell>
        <template #value>
          <van-card
            v-for="info in order.cartInfo"
            :num="info.cart_num"
            :price="info.truePrice"
            :title="info.productInfo.store_name"
            :thumb="info.productInfo.image"
          />
          <p class="order-price">总金额：{{ order.pay_price }}元</p>
        </template>
      </van-cell>
      <van-cell class="btn">
        <template #right-icon>
          <van-button>再次购买</van-button>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup>
import { computed, ref } from '@vue/reactivity'
const tagOptions = ref([
  { text: '全部', type: '' },
  { text: '待付款', type: '0' },
  { text: '待发货', type: '1' },
  { text: '待收货', type: '2' },
  { text: '待评价', type: '3' },
  { text: '已完成', type: '4' }
])
const currentType = ref('')
// 所有订单
const orderList = ref([])
// 要展示的订单
const shownOrder = computed(() => {
  return currentType.value === '' ? orderList.value : 
  orderList.value?.filter(item => item._status._type.toString() === currentType.value)
})
// 是否为空
const isEmpty = computed(() => shownOrder.value.length === 0)

import { getOrderList } from '@/api/order'
const initOrderList = async () => {
  const { data } = await getOrderList()
  if (data.status !== 200) { return }
  orderList.value = data.data
}
initOrderList()
</script>

<style lang="scss" scoped>
.van-nav-bar {
  position: fixed;
  width: 100%;
}

.tags {
  position: fixed;
  top: 45px;
  width: 100%;
  z-index: 2000;

  .van-cell {
    padding-bottom: 0;

    .tag-list {
      padding: 0 5px;
      display: flex;
      justify-content: space-between;
      color: #666;

      li {
        padding-bottom: 10px;
        position: relative;
      }
      
      li.active {
        color: #FF270C;
      }

      li.active::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 3px;
        width: 100%;
        height: 3px;
        background-color: #F2270C;
      }
    }
  }
}

.order-list {
  background-color: #F7F7F7;
  padding: 100px 0 10px;

  .van-empty {
    // 盛满屏幕，同时遮盖灰边
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
  }

  .van-cell-group {
    margin-bottom: 10px;

    .van-card {
      background-color: #fff;
      padding: 0;

      :deep(.van-card__content) {
        padding: 10px 0;
        font-size: 13px;
        box-sizing: border-box;

        .van-card__price-integer {
          font-size: 14px;
        }
      }
    }

    .order-price {
      color: #666;
      float: right;
      margin-top: 5px;
    }

    .btn {
      justify-content: flex-end;

      .van-button {
        height: 30px;
        border-radius: 15px;
      }
    }
  }
  
}
</style>
